<template>
	<view>
		<uni-nav-bar :fixed="true" :statusBar="true" :border="false" @clickRight="openAdd">
			<!-- 左边 -->
			<block slot="left">
				<view class="nav-left">
					<view class="iconfont icon-qiandao"></view>
				</view>
			</block>
			<!-- 中间 -->
			<view class="nav-tab-bar">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="active center" :class="{'active':tabIndex==index,'gray':tabIndex != index}" @tap="changeTab(index)">
						{{tab.name}}
					    <view v-if="(tabIndex==index)" class="nav-tab-bar-line"></view>
					</view>
				</block>
				
				<!-- <view class="center">话题<view class="nav-tab-bar-line"></view></view> -->
			</view>
			<!-- 右边 -->
			<block slot="right">
				<view class="nav-right">
					<view class="iconfont icon-yixianshi-"></view>
				</view>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components:{
			uniNavBar
		},
		props:{
			tabBars:Array,
			tabIndex:Number
		},
		methods:{
			//打开发布页面
			openAdd(){
				uni.navigateTo({
					url:'../add-input/add-input'
				})
			},
			changeTab(index){
				this.$emit('change-tab',index)
			}
		}
	}
</script>

<style scoped>
.nav-left>view,.nav-right>view {
	font-size: 40upx;
}
.nav-left>view {
	color: #FF9616;
}
.nav-left {
	margin-left: 16upx;
}
.nav-right {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav-tab-bar {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-left: -20upx;
}
.nav-tab-bar>view {
	font-size: 32upx;
	padding: 0 15upx;
	font-weight: bold;
}
.active {
	color: #333333 !important;
}
.nav-tab-bar-line {
	border-bottom: 5upx solid #FEDE33;
	border-top: 5upx solid #FEDE33;
	width: 60upx;
	border-radius: 20upx;
}
.center {
	text-align: center;
}
.gray {
	color:#7D7E7C !important;
}
.u-f-ac{
	display: flex;
	justify-content: space-between;
}
</style>
